<!DOCTYPE html>
<html>

<head>
    <title>BeiJing</title>
    <script src="d3.min.js"></script>
    <script src="d3-geo-projection.min.js"></script>
</head>

<body>
    <svg width="1600" height="800" id="mainsvg" class="svgs" style='display: block; margin: 0 auto;'></svg>
    <script>
        // The following code is the typical routine of my d3.js code. 
        const svg = d3.select('svg');
        const width = svg.attr('width');
        const height = svg.attr('height');

        d3.json('beijing.json').then(async data => {
            const projection = d3.geoNaturalEarth1();
            // const projection = d3.geoMercator();
            // const projection = d3.geoMollweide();
            // const projection = d3.geoNicolosi();
            // const projection = d3.geoIdentity();
            projection.fitSize([width, height], data);
            console.log(projection([116.418757,39.917544]));
            const path = d3.geoPath().projection(projection);
            console.log(path(data.features))
            svg.selectAll('path').data(data.features).join('path')
            .attr('stroke', 'black').attr('fill', 'none')
            .attr('d', path)
            .attr('id', d => d.properties.name);
            // svg.selectAll('text').data(data.features).join('text')
            // .attr('text-anchor', 'middle').attr('font-size', '0.8em')
            // .text(d => d.properties.name)
            // .attr('transform', d => `translate(${projection([d.properties.centroid[0], d.properties.centroid[1]])})`)
            // .attr('transform', d => {
            //     let p = d3.select(`#${d.properties.name}`).node().getPointAtLength(0);
            //     return `translate(${p.x}, ${p.y})`;
            // })
        });

    </script>
</body>

</html>